<template>
  <alertBox data-title="员工选择">
    <div class="search">
      <input
        type="text"
        placeholder="请输入"
        class="input search-input"
        v-model="searchText"
        @keydown.enter="search"
      />
      <button class="btn btn-padding" @click="search">搜索</button>
      <button class="btn-white" @click="onReset">
        重置
      </button>
    </div>
    <div class="table">
      <el-table
        :data="list"
        style="width: 100%"
        :header-row-style="{ color: '#202536' }"
        :row-style="{ color: '#5E617D' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"/>
        <el-table-column type="index" label="序号"/>
        <el-table-column label="状态">
          <template #default="scope">
            <div class="decorate-box">
              <div
                class="decorate"
                :style="{
                                    background:
                                        scope.row.policyStatus == 1
                                            ? '#00D679 '
                                            : scope.row.policyStatus == 2
                                            ? '#FF7E68'
                                            : '#1989FA'
                                }"
              ></div>
              <!--  style="color:#1989FA" -->
              <p>
                {{
                  scope.row.policyStatus == 1
                    ? '保障中'
                    : scope.row.policyStatus == 2
                      ? '不在保'
                      : '待生效'
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column
          label="身份证号"
          prop="encryptionIdCardNo"
        ></el-table-column>
        <el-table-column prop="companyPlanName" label="方案类型"/>
        <el-table-column prop="serveCompanyName" label="被派遣单位"/>
      </el-table>
      <div class="foot">
        <el-pagination
          class="pagination"
          v-model:currentPage="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changeNum"
        >
        </el-pagination>
        <button
          class="btn btn-red"
          style="background:#1989FA"
          @click="determineSelection"
        >
          <!-- <i class="el-icon el-icon-upload2" /> -->
          确定
        </button>
      </div>
    </div>
  </alertBox>
</template>

<script lang="ts" setup>
import alertBox from './alert-box.vue'
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { getStaffRecordList } from '@/api/long-insure'

export default defineComponent({
    props: ['id', 'insur', 'type'],
    // async created () {
    //     const result = await getStaffRecordList({
    //         pageNum: 1,
    //         pageSize: 10,
    //         policyStatus: '',
    //         searchText: this.searchText
    //     })
    //     this.list = result.list
    //     this.total = result.total
    // },
    mounted () {
        console.log(this.$props.insur, 'this.$props.insur')
        console.log(this.$props.id, 'this.$props.id')
        console.log(this.$props.type, 'this.$props.type')
        this.getStaffRecordList()
    },
    data () {
        return {
            list: [] as any,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            selection: [],
            searchText: '',
            insurCompany: this.$props.insur,
            // eslint-disable-next-line vue/no-dupe-keys
            type: this.$props.type
        }
    },
    methods: {
        async getStaffRecordList () {
            console.log('调用啦')

            // .filter((item: any) => item?.policyStatus === 1)
            console.log(this.type === 'add', '2222222222222222222222222')
            let result
            if (this.type === 'add') {
                // result.list.map((item: any) => {
                //     item.encryptionIdCardNo = item.idCardNo.replace(
                //         /(.{3})(?:\d+)(.{4})$/,
                //         '$1*********$2'
                //     )
                // })
                result = await getStaffRecordList({
                    companyPlanId: Number(this.$props.id) as number,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    searchText: this.searchText,
                    insurCompany: this.$props.insur,
                    insurValidFlag: true,
                    insurExistEndDateFlag: true
                })
                console.log(result.list, 'resultresultresultresultresultresult333333333333')
                // result.list = result.list.filter((item: any) => item?.policyStatus !== 1 && item?.policyStatus !== 0)
            } else {
                // result.list.map((item: any) => {
                //     item.encryptionIdCardNo = item.idCardNo.replace(
                //         /(.{3})(?:\d+)(.{4})$/,
                //         '$1*********$2'
                //     )
                // })
                result = await getStaffRecordList({
                    companyPlanId: Number(this.$props.id) as number,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    policyStatus: '',
                    searchText: this.searchText,
                    insurCompany: this.$props.insur,
                    insurValidFlag: false,
                    insurEmptyEndDateFlag: true
                })
                console.log(result.list, 'resultresultresultresultresultresult')
                result.list = result.list.filter((item: any) => item?.policyStatus !== 2 && !item?.insurEndTime)
            }
            // eslint-disable-next-line no-undef
            result.list.map((item: any) => {
                item.encryptionIdCardNo = item.idCardNo.replace(
                    /(.{3})(?:\d+)(.{4})$/,
                    '$1*********$2'
                )
            })
            // eslint-disable-next-line no-undef
            console.log(result.list.length, 'resultresultresultresultresultresult222222222222222222222222222222')
            this.list = result.list
            this.total = result.total
        },
        changeNum (num: number | string) {
            console.log(num, 'numnum')
            this.getStaffRecordList()
        },
        changeSize () {
            this.getStaffRecordList()
        },
        handleSelectionChange (event: any) {
            this.selection = event
            console.log(this.selection, 'this.selection')
        },
        determineSelection () {
            console.log('点击啦')
            this.$emit('complete', this.selection)
        },
        search () {
            this.getStaffRecordList()
        },
        onReset () {
            this.searchText = ''
            this.getStaffRecordList()
        }
    }
})
</script>

<style scoped lang="stylus">
// 弹窗样式
eject()
ejectFrom()
:deep() .container-c
  width 1300px
  height 1021px
  overflow: auto

:deep() .container-c::-webkit-scrollbar
  display: none

.process
  width 820px

.box-block
  width 820px

.table
  padding 24px

.decorate-box
  display flex
  align-items center

.decorate
  width 6px
  height 6px
  border-radius 50%
  margin-right 5px

.foot
  margin-top 20px
  display flex
  align-items center
  justify-content space-between

.search
  text-align right
  padding-right: 20px

.btn-padding
  margin 0 15px
</style>
